<template>
  <div class="resume_header">
    <span>基本信息</span>
  </div>
  <div class="resume_center">
    <!-- 用户基本信息 -->
    <div class="basic_info" v-if="true">

      <ul class="info_list">
        <li>
          <p class="info_title" style="">
            姓名：
            <span class="info_content" style="">
              {{name}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            性别：
            <span class="info_content" style="">
              {{gander}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            年龄：
            <span class="info_content" style="">
              {{age}}岁
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            出生年月：
            <span class="info_content" style="">
              {{birth}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            籍贯：
            <span class="info_content" style="">
              {{birthAddress}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            现居地：
            <span class="info_content" style="">
              {{newAddress}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            政治面貌：
            <span class="info_content" style="">
              {{politicalOutlook}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            就读学校：
            <span class="info_content" style="">
              {{schoolName}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            学历：
            <span class="info_content" style="">
              {{education}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            所学专业：
            <span class="info_content" style="">
              {{major}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            在校时间：
            <span class="info_content" style="">
              {{getSchoolTime}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            电话：
            <span class="info_content" style="">
              {{phone}}
            </span>
          </p>
        </li>
        <li>
          <p class="info_title" style="">
            邮箱：
            <span class="info_content" style="">
              {{email}}
            </span>
          </p>
        </li>
      </ul>
    </div>

  </div>
</template>
<script lang='ts'>

import { reactive, ref, onMounted, onUnmounted, computed } from "vue"
import { useStore } from "vuex";
import { getAddressCode, getAddressText } from "@/hook/hook"
export default {
  name: 'UserBasicInfo',
  components: {

  },
  setup() {
    const store = useStore()

    // 用户基本信息

    const userInfos = {
      name: computed(() => store.state.userState.userBasicInfo.name),
      gander: computed(() => store.state.userState.userBasicInfo.gander),
      age: computed(() => store.getters.getAge),
      birth: computed(() => store.state.userState.userBasicInfo.birth),
      birthAddress: computed(() => store.getters.getAddress),
      newAddress: computed(() => store.getters.getAddress),
      politicalOutlook: computed(() => store.state.userState.userBasicInfo.politicalOutlook),

      schoolName: computed(() => store.state.userState.userEdu.schoolName),
      education: computed(() => store.state.userState.userEdu.education),
      major: computed(() => store.state.userState.userEdu.major),
      getSchoolTime: computed(() => store.getters.getSchoolTime),

      phone: computed(() => store.state.userState.userBasicInfo.phone),
      email: computed(() => store.state.userState.userBasicInfo.email),

    }

    onMounted(() => {
      userInfos


    })





    return {

      ...userInfos,


    }


  }
}
</script>
<style scoped>
/* 编辑按钮 */



/* 简历基本信息 */
.info_title {
  display: inline-flex;
  font-size: 20px;
}

.info_content {
  /* width: 300px;
  background-color: blue; */
  position: absolute;
  margin-left: 125px;
  font-size: 18px;
}

.info_list {
  /* padding-left: 30px; */
  /* margin: 10px; */
  line-height: 40px;

  /* background-color: #FFF; */


}

.user_avatar {
  position: absolute;
  height: 110px;
  width: 110px;
}

.basic_info {
  padding-left: 60px;
  padding-top: 10px;
  /* position: relative; */
  height: 600px;
  /* background-color: #FFF; */
}

.basic_info:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}



.resume_center {
  font-family: '微软雅黑';
  height: 1000px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

.btnEdit {
  width: 800px;

  display: flex;
  justify-content: flex-end;
}
</style>